import 'dart:convert';

import 'package:ai_data_capture/bean/ConfigFileBean.dart';
import 'package:ai_data_capture/util/JsonUtil.dart';
import 'package:ai_data_capture/util/toast_util.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'logic.dart';

class EditConfigPage extends StatelessWidget {
  const EditConfigPage({super.key});

  @override
  Widget build(BuildContext context) {
    final EditConfigLogic logic = Get.find<EditConfigLogic>();
    final state = logic.state;
    return Scaffold(
        appBar: AppBar(title: const Text("编辑配置文件"), actions: [
          InkWell(
              onTap: () {
                var content = logic.controller.text;
                if (content.isEmpty) {
                  showToast("请输入配置内容");
                  return;
                }
                try {
                  Get.back(
                      result: ConfigFileBean.fromJson(jsonDecode(content)));
                } catch (e) {
                  showToast("json格式有问题$e");
                }
              },
              child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    "提交",
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.blue),
                  )))
        ]),
        body: Column(children: [
          Expanded(
              child: Container(
                  margin:
                      const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                  decoration: BoxDecoration(
                      color: Colors.grey.shade100,
                      borderRadius: BorderRadius.circular(5)),
                  child: TextField(
                      controller: logic.controller,
                      maxLines: null,
                      style: const TextStyle(fontWeight: FontWeight.bold),
                      decoration: const InputDecoration(
                          contentPadding: EdgeInsets.symmetric(
                              horizontal: 10, vertical: 10),
                          isDense: true,
                          isCollapsed: true,
                          border: InputBorder.none)))),
          Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  InkWell(
                      onTap: () {
                        try {
                          logic.controller.text =
                              JsonUtil.format(logic.controller.text);
                          showToast("格式化成功");
                        } catch (e) {
                          showToast("格式化失败$e");
                        }
                      },
                      child: Container(
                          padding: const EdgeInsets.symmetric(
                              vertical: 10, horizontal: 15),
                          margin: const EdgeInsets.symmetric(horizontal: 5),
                          decoration: BoxDecoration(
                              color: Colors.grey.shade200,
                              borderRadius: BorderRadius.circular(5)),
                          child: const Center(
                              child: Text("格式化",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.blue))))),
                  Expanded(
                    child: SingleChildScrollView(
                        scrollDirection: Axis.horizontal,
                        child: Row(children: [
                          InkWell(
                              onTap: () {
                                logic.insert("{");
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text("{",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.insert("}");
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text("}",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.insert(":");
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text(":",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.insert("\"");
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text("\"",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.insert(",");
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text(",",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.controller.selection =
                                    TextSelection.fromPosition(
                                  TextPosition(
                                      offset:
                                          logic.controller.selection.start - 1),
                                );
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text("⬅",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                          InkWell(
                              onTap: () {
                                logic.controller.selection =
                                    TextSelection.fromPosition(
                                  TextPosition(
                                      offset:
                                          logic.controller.selection.start + 1),
                                );
                              },
                              child: Container(
                                  padding: const EdgeInsets.symmetric(
                                      vertical: 10, horizontal: 20),
                                  margin:
                                      const EdgeInsets.symmetric(horizontal: 5),
                                  decoration: BoxDecoration(
                                      color: Colors.grey.shade200,
                                      borderRadius: BorderRadius.circular(5)),
                                  child: const Center(
                                      child: Text("➡",
                                          style: TextStyle(
                                              fontWeight: FontWeight.bold,
                                              color: Colors.blue))))),
                        ])),
                  ),
                ],
              ))
        ]));
  }
}
